<template>
	  <div id="index">
	    <el-container :style="containerStyle">
	      <el-header  style="height:10%;width:100%" >
	        <el-steps :active="stepNumber.active" align-center >
            <el-step title="基本信息" ></el-step>
            <el-step title="选择表" ></el-step>
            <el-step title="选择数据" ></el-step>
            <el-step title="创建方式" ></el-step>
            <el-step title="测试" ></el-step>
          </el-steps>
	      </el-header>
	      <el-main style="margin: 0 auto;height:90%;width:80%;padding-top:50px;">
	        <v-step1 v-if="stepNumber.active ==1" :stepNumber="stepNumber" />
          <v-step2 v-if="stepNumber.active ==2" :stepNumber="stepNumber"/>
          <v-step3 v-if="stepNumber.active ==3" :stepNumber="stepNumber"/>
          <v-step4 v-if="stepNumber.active ==4" :stepNumber="stepNumber"/>
          <v-step5 v-if="stepNumber.active ==5" :stepNumber="stepNumber"/>
	      </el-main>
	    </el-container>
	  </div>
</template>
<script>
import step1 from './step1'
import step2 from './step2'
import step3 from './step3'
import step4 from './step4'
import step5 from './step5'
export default {
  name: "Index",
  components:{
    'v-step1':step1,
    'v-step2':step2,
    'v-step3':step3,
    'v-step4':step4,
    'v-step5':step5,
  },
  data() {
    return {
      stepNumber:{
        active:1,
        dataApi:{}
      },
      isCollapse: false,
      containerStyle:{
        height:'100%'
      }
    };
  },
  created(){
    this.containerStyle.height=window.innerHeight-20+"px";
  },
  methods: {
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#index {
  height: 100%;
}
.el-container {
  background-color: #eee;
}
.el-aside {
  background-color: #fff;
}
.el-main {
  padding: 0;
}
</style>
